<template> 
    <Modal
        :value="visible"
        :title="title"
        width="600"
        @on-cancel="handleCancel"
        @on-ok="submit" > 
        <div class="modalWrap">
            <div class="title">客户基本信息</div>  
            <Form :label-width="100" class="editDomain" ref="form"  :model="temp" :rules="ruleValidate">
                <Row>
                    <Col span="22">
                    <FormItem label="客户名称：" prop="customer_mark"> 
                        <Input type="text" v-model="temp.customer_mark" placeholder="请填写客户名称" style="width: 400px; " />
                    </FormItem>
                    </Col>
                    <Col span="4"></Col>
                </Row>
                <Row>
                    <Col span="22">
                    <FormItem label="公司名称："> 
                        <Input type="text" v-model="temp.company" placeholder="请填写公司名称" style="width: 400px; " />
                    </FormItem>
                    </Col>
                    <Col span="4"></Col>
                </Row>
                <Row>
                    <Col span="22">
                    <FormItem label="客户状态："> 
                      <select class="ui-select" @change="handleChangeStatus" :value="temp.status"  placeholder="请选择客户状态"  style="width: 400px; ">
                          <option v-for="item in statusOptions" :value="item.value" :key="item.value">{{item.label}}</option>
                      </select>  
                    </FormItem>
                    </Col>
                    <Col span="4"></Col>
                </Row>  
            </Form>
            <div class="title">
                联系人信息
                <span :style="{fontSize:'12px', color: info ? '#999' : 'red'}">(联系人姓名必填、联系方式邮箱、电话、qq至少填一个且格式正确)</span>
            </div>
            <div class="ivu-table-wrapper modal-table">
                <table class="ivu-table ivu-table-small" style="width: 100%;">
                    <thead class="ivu-table-header">
                        <th>联系人姓名</th> 
                        <th>联系邮箱</th> 
                        <th>联系电话</th> 
                        <th>联系qq</th> 
                        <th>操作</th> 
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in contacts" :key="index">
                            <td>
                                <Input type="text" size="small" placeholder="请填写姓名" v-model="item.name" style="width: 100px; " />
                            </td>
                            <td :class="{errInput : item.emailErr}"> 
                                <Input type="text" size="small" placeholder="请填写邮箱" v-model="item.email" :style="{width: '100px'}" />
                            </td>
                            <td :class="{errInput : item.phoneErr}"> 
                                <Input type="text" size="small" placeholder="请填写电话" v-model="item.phone" :style="{width: '100px'}"  />
                            </td>
                            <td :class="{errInput : item.qqErr}"> 
                                <Input type="text" size="small" placeholder="请填写qq" v-model="item.qq" :style="{width: '100px'}"  />
                            </td>
                            <td>
                                <Button  
                                    size="small"
                                    type="text" 
                                    @click="insertRow(index)"
                                >插入</Button> 
                                <Button  
                                    v-show="index !== 0"
                                    size="small"
                                    type="text" 
                                    @click="deleteRow(index, item)"
                                >删除</Button>  
                            </td>
                        </tr>
                    </tbody>
                </table> 
            </div>  
        </div>
        <Button slot="footer" type="text" size="large" @click="handleCancel">取消</Button>
        <Button slot="footer" type="primary" size="large" @click="submit">确定</Button>
    </Modal> 
</template>

<script>
import { STATUS_OPTIONS } from '@/utils/opts'
import { EMAIL_RULE, PHONE_RULE, QQ_RULE } from '@/utils/regExpRule'
import { cloneDeep } from '@/utils'
export default {
    name: "CreateCustomerModal",
    props: {
        title: String,
        visible: Boolean,
        data: {
            type: Object,
            default(){
                return {
                    "customer_mark": "", //客户名称
                    "company": "", //公司名
                    "status": 1, // 1.测试 2.商务 3.停用
                    "contacts": [] 
                }
            }
        }
    },
    data(){
        return {
            statusOptions: STATUS_OPTIONS,
            ruleValidate: {
                customer_mark: [
                    { required: true, message: '请填写客户名称', trigger: 'blur' },
                ]
            }, 
            temp: { 
                customer_mark: '',
                company: '', 
                status: '1'
            },
            contacts: [
                this.renderDefaultContacts()
            ], 
            info: true 
        }
    },
    watch:{
        data(d){
            this.temp.customer_mark = d.customer_mark  
            this.temp.company = d.company  
            this.temp.status = `${d.status}`  
            this.contacts = d.contacts  
            this.info = true   
        }
    },
    methods: {
        submit(){ 
            this.info = true 
            this.$refs.form.validate((valid) => {
                if (valid) { 
                    /****** 不进行正则校验 has deleted ********/
                    // if(this.contacts.some(item => {  //联系方式至少一项必填
                    //     return !item.name ||
                    //             (!item.email && !item.phone && !item.qq)  
                    // })){                            
                    //     this.$Message.warning("请检查联系人信息是否填写正确");
                    //     this.info = false
                    //     return;  
                    // } 


                    let 
                        checkPass = true ;
                    //检查填写项格式是否正确
                    this.contacts.forEach(item => {
                        if(
                            !item.name 
                        ||  (!item.email && !item.phone && !item.qq)  
                        ){  //必填项未填
                            checkPass = false
                        }

                        if(item.email && !EMAIL_RULE.test(item.email)){
                            item.emailErr = true
                            checkPass = false
                        }else{
                            item.emailErr = false
                        } 

                        if(item.phone && !PHONE_RULE.test(item.phone)){
                            item.phoneErr = true
                            checkPass = false
                        }else{
                            item.phoneErr = false
                        }  
 
                        if(item.qq && !QQ_RULE.test(item.qq)){
                            item.qqErr = true
                            checkPass = false
                        }else{
                            item.qqErr = false
                        }  
                    });  
                    if(!checkPass){               
                        this.$Message.warning("请检查联系人信息是否填写正确");
                        this.info = false
                        return; 
                    }
                    
                    let contacts = this.contacts.map(item => {
                        return {
                            name: item.name,
                            email: item.email,
                            phone: item.phone,
                            qq: item.qq,
                        }
                    }) 
                    let temp = cloneDeep(this.temp)
                    temp.status = parseInt(temp.status) 
                    this.$emit('save', Object.assign({}, temp, {contacts})) 
                }
            })
        },
        renderDefaultContacts(){
            return  {
                "name": "",
                "email": "",
                "phone": "",
                "qq": ""
            }
        },
        handleCancel(){
            this.$emit('closeModal')
        },
        deleteRow(index){  
            this.contacts.splice(index, 1)
        },
        insertRow(index){
            let contacts = this.contacts;
            this.contacts.splice(index + 1, 0, this.renderDefaultContacts())
        },
        handleChangeStatus(e){
            this.temp.status = e.target.value
        }, 
    }
}
</script>

<style lang="scss">
    .modalWrap{
        .title{
            border-left:  3px solid #409EFF;
            font-size: 16px;
            color: #333;
            padding-left: 10px;
            margin-bottom: 15px;
        }
        .modal-table{
            table{
                border-collapse: collapse;
                td, th{
                    padding-left: 5px; 
                }
                tr{
                    padding:  5px; 
                }
            }
        }
        .errInput{ 
            .ivu-input{
                border: 1px solid red;
            }
        } 
    }
</style>


